var bgDOM = null;

function OnMouseOverTab(id) {
	tab = document.getElementById(id).style;
	tab.backgroundColor = "#cccccc";
};

function OnMouseOutTab(id) {
	tab = document.getElementById(id).style;
	tab.backgroundColor = "#ffffff";
};

function ChangeTab(id) {
	if (!id) {
		id = "global_tab";
	}
	
	var selected_tab = localStorage["tt_selected_tab"];
	if (selected_tab) {
		// unselect tab page
		cur = document.getElementById(selected_tab);
		cur.style.borderBottomWidth = "1px";
		cur.style.borderLeftWidth = "0px";
		cur.style.borderRightWidth = "0px";
		cur.style.borderTopWidth = "0px";
		cur.style.padding = "2px 12px";
		cur.onmouseover = function() {OnMouseOverTab(this.id);};
		
		// clear currect tab content
		var content = document.getElementById('tab_content');
		if (content.hasChildNodes()) {
			while (content.childNodes.length >= 1) {
				content.removeChild(content.firstChild);
			}
		}
	}
	
	// select tab page
	sel = document.getElementById(id);
	sel.style.borderBottomWidth = "0px";
	sel.style.borderLeftWidth = "1px"
	sel.style.borderRightWidth = "1px";
	sel.style.borderTopWidth = "1px";
	sel.style.padding = "2px 10px";
	sel.onmouseover = null;
	
	// store current selected tab id
	localStorage["tt_selected_tab"] = id;
	
	// update tab content
	Refresh();
};

function SetFillerWidth() {
	var tabs_header = document.getElementById("tabs_header").offsetWidth;
	var offset = document.getElementById("filler_tab").offsetWidth;
	var tabs = bgDOM.tabs.GetTabs();
	for (tab in tabs) {
		offset = offset + document.getElementById(tab).offsetWidth;
	}
	document.getElementById("filler_tab").style.width = tabs_header - offset;
};

function CreateTabs() {
	var tabs = bgDOM.tabs.GetTabs();
	for (tab in tabs) {
		var newListItem = document.createElement("li");
		newListItem.id = tab;
		newListItem.onclick = function() {ChangeTab(this.id);};
		newListItem.onmouseover = function() {OnMouseOverTab(this.id);};
		newListItem.onmouseout = function() {OnMouseOutTab(this.id);};
		document.getElementById('tablist').insertBefore(newListItem, document.getElementById('tablist').firstChild);
		newListItem.innerText = tabs[tab].name;
	}
};

function OAuthLogin() {
	LoadOAuth(true);
	bgDOM.yqlHandler.GetRequestToken();
};

function OAuthLogout() {
	bgDOM.user.Logout();
	InitOAuth();
};

function OAuthVerify() {
	var verifier = document.getElementById("verifier").value;
	if (!verifier) {
		return;
	}
	LoadOAuth(true);
	bgDOM.yqlHandler.GetAccessToken(verifier, OAuthTokenReceived);
};

function OAuthTokenReceived() {
	bgDOM.user.GetCredentials(OAuthCredentialsReceived);
};

function OAuthCredentialsReceived() {
	LoadOAuth(false);
	InitOAuth();
	Refresh();
};

function InitOAuth() {
	if (bgDOM.user.IsAuthenticated()) {
		document.getElementById("authenticated").style.display = "inline";
		document.getElementById("login").style.display = "none";
		document.getElementById("verify").style.display = "none";
		
		var para = document.createElement("p");
		var text = document.createTextNode(bgDOM.user.GetScreenname());
		para.appendChild(text);
		var pImg = bgDOM.user.GetImageUrl();
		if (pImg && pImg != "") {
			para.appendChild(document.createElement('br'));
			var img = document.createElement("img");
			img.src = bgDOM.user.GetImageUrl();
			img.alt = 'Profile image';
			para.appendChild(img);
		}
		document.getElementById("user").appendChild(para);
	} else if (bgDOM.user.IsAuthenticating()) {
		document.getElementById("authenticated").style.display = "none";
		document.getElementById("login").style.display = "none";
		document.getElementById("verify").style.display = "inline";
	} else {
		document.getElementById("login").style.display = "inline";
		document.getElementById("authenticated").style.display = "none";
		document.getElementById("verify").style.display = "none";
	}
};

function LoadContent(loading) {
	if (loading) {
		document.getElementById("tab_content").style.display = "none";
		document.getElementById("loading_content").style.display = "block";
	} else {
		document.getElementById("loading_content").style.display = "none";
		document.getElementById("tab_content").style.display = "block";
	}
};

function LoadOAuth(loading) {
	if (loading) {
		document.getElementById("loading_oauth").style.display = "block";
	} else {
		document.getElementById("loading_oauth").style.display = "none";
	}
};
 
function Refresh() {
	LoadContent(false);
	if (bgDOM.tabs.UpdateTab(localStorage["tt_selected_tab"], document.getElementById('tab_content'), Refresh)) {
		LoadContent(true);
	}
};

function Init() {
	// Get background page DOM
	bgDOM = chrome.extension.getBackgroundPage();
	
	// Create tab pages
	CreateTabs();
	SetFillerWidth();
	
	// Set Twitter authorization section
	InitOAuth();
	
	// Select last used tab
	ChangeTab(localStorage["tt_selected_tab"]);
};